<template>
  <div class="container">
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index/home' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>资金管理</el-breadcrumb-item>
      <el-breadcrumb-item>资金流水</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
      <el-col :span="6">
        <el-input
          v-model="search"
          placeholder="请输入内容"
          class="input-with-select"
          clearable
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
      <el-col :span="18" class="right">
        <el-button
          icon="el-icon-plus"
          type="success"
          size="mini"
          @click="handleAdd"
          >添加</el-button
        >
      </el-col>
    </el-row>
    <!-- 表格区域 -->
    <el-table
      v-if="tableData.length > 0"
      height="500px"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column prop="id" label="序号" width="100"> </el-table-column>
      <el-table-column prop="date" label="创建时间" width="250">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="收支类型" width="150">
      </el-table-column>
      <el-table-column prop="describes" label="收支描述" width="150">
      </el-table-column>
      <el-table-column prop="incode" label="收入" width="170">
        <template slot-scope="scope">
          <span style="color: #00d053">{{ scope.row.incode }}￥</span>
        </template>
      </el-table-column>
      <el-table-column prop="expend" label="支出" width="220">
        <template slot-scope="scope">
          <span style="color: #f56767">{{ scope.row.expend }}￥</span>
        </template>
      </el-table-column>
      <el-table-column prop="crash" label="账户现金" width="170">
        <template slot-scope="scope">
          <i class="el-icon-s-finance"></i>
          <span style="color: #4db3ff">{{ scope.row.crash }}￥</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="220">
      </el-table-column>
      <el-table-column label="操作" prop="operation">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            plain
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)"
            v-if="user.identity == 'manager'"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            plain
            @click="handleDelete(scope.$index, scope.row)"
            v-if="user.identity == 'manager'"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row>
      <el-col :span="24">
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="paginations.page_index"
            :page-sizes="paginations.page_sizes"
            :page-size="paginations.page_size"
            :layout="paginations.layout"
            :total="paginations.total"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <Dialog
      :dialogVisible="dialog"
      :formData="formData"
      @update="getProfile"
    ></Dialog>
  </div>
</template>

<script>
import Dialog from "@/components/Dialog";
export default {
  name: "fundlist",
  data() {
    return {
      paginations: {
        page_index: 1, //当前位于哪页
        total: 0, //数据总数
        page_size: 5, //一页显示多少条
        page_sizes: [5, 10, 15, 20], //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper", //翻页属性
      },
      tableData: [],
      allTableData: [],
      search: "",
      dialog: {
        show: false,
        title: "",
        option: "edit",
      },
      formData: {
        type: "",
        describes: "",
        icome: "" * 1,
        expend: "" * 1,
        crash: "" * 1,
        remark: "",
        id: "",
      },
    };
  },
  created() {
    this.getProfile();
  },
  methods: {
    //获取表格数据
    getProfile() {
      this.$axios
        .get("/api/profile/query")
        .then((res) => {
          this.allTableData = res.data.data;
          //设置分页数据
          this.setPaginations();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleEdit(index, row) {
      //编辑
      this.dialog = {
        show: true,
        title: "修改资金信息",
        option: "edit",
      };
      this.formData = {
        type: row.type,
        describes: row.describes,
        expend: row.expend,
        id: row.id,
        icome: row.incode,
        remark: row.remark,
        crash: row.crash,
      };
    },
    handleDelete(index, row) {
      this.$axios
        .delete(`/api/profile/delete/${row.id}`)
        .then((res) => {
          if (res.data.code == 1) {
            this.$message(`${res.data.msg}`);
            this.getProfile();
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
    handleAdd() {
      this.formData = {
        type: "",
        describes: "",
        expend: 0,
        id: "",
        icome: 0,
        remark: "",
        crash: 0,
      };
      this.dialog = {
        show: true,
        title: "添加资金信息",
        option: "add",
      };
    },
    //设置分页属性
    setPaginations() {
      //初始化
      this.paginations.total = this.allTableData.length;
      this.paginations.page_index = 1;
      this.paginations.page_size = 5;
      //设置默认的分页数据
      this.tableData = this.allTableData.filter((item, index) => {
        return index < this.paginations.page_size;
      });
    },
    //分页方法
    handleCurrentChange(page) {
      //获取当前页
      let index = this.paginations.page_size * (page - 1);
      //获取数据总数
      let nums = this.paginations.page_size * page;
      //容器
      let tables = [];
      for (let i = index; i < nums; i++) {
        if (this.allTableData[i]) {
          tables.push(this.allTableData[i]);
        }
        this.tableData = tables;
      }
    },
    //切换size
    handleSizeChange(page_size) {
      this.paginations.page_index = 1;
      this.paginations.page_size = page_size;
      this.tableData = this.allTableData.filter((item, index) => {
        return index < page_size;
      });
    },
  },
  components: {
    Dialog,
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
  },
};
</script>

<style scoped>
.pagination {
  margin-top: 10px;
  text-align: right;
}

.el-row {
  margin-top: 20px;
}

.right {
  text-align: right;
}
</style>